<template>
  <div class="home">
    <!-- 头部样式 -->
    <div class="order_title">
      <span class="one" @click="tuihou">&lt;</span>
      <van-icon name="wap-home-o" size="22px" />
    </div>
    <!-- 一大块蓝色广告 -->
    <div class="GangGao">扣叮啷|用心做教育</div>
    <!-- 中间功能模块的内容 -->
    <div class="workInfo">
      <router-link to="/order" tag="li">
        <img src="" alt="" />
        <h3>发货单</h3>
        <span>order</span>
      </router-link>
      <router-link to="/message" tag="li">
        <img :src="srcImgOne" alt="" />
        <h3>消息中心</h3>
        <span>NEEWS</span>
      </router-link>
      <router-link to="/star" tag="li">
        <img :src="srcImgtWO" alt="" :style="{ height: '0.65rem' }" />
        <h3>物流单</h3>
        <span>LOGISTICS</span>
      </router-link>
      <router-link to="/cust" tag="li">
        <img :src="srcImgThree" alt="" :style="{ height: '0.65rem' }" />
        <h3>我的客户</h3>
        <span>MY CLIENTS</span>
      </router-link>
      <router-link to="/visit" tag="li">
        <img :src="srcImgFour" alt="" :style="{ height: '0.65rem' }" />
        <h3>客户关怀</h3>
        <span>CUSTOMER</span>
      </router-link>
    </div>
    <!-- 底部的tab切换 -->
    <tab-bar />
  </div>
</template>

<script>
import TabBar from "@/components/TabBar.vue";
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import { GetHomeLists } from "@/";
export default {
  name: "Home",
  components: {
    // HelloWorld,
    TabBar,
  },
  data() {
    return {
      // 引入功能模块的图片
      srcImgOne: require("@/assets/xxzx.png"),
      srcImgtWO: require("@/assets/wld.png"),
      srcImgThree: require("@/assets/wodekehu.png"),
      srcImgFour: require("@/assets/khgh.png"),
    };
  },
  methods: {
    tuihou() {
      this.$router.go(-1);
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* ？头部样式 */
.order_title {
  width: 100%;
  height: 0.5rem;
  background-color: #003399;
  line-height: 0.5rem;
  color: white;
  font-size: 0.18rem;
  padding-top: 0.1rem;
  display: flex;
  justify-content: space-between;
  .one {
    margin-left: 0.2rem;
  }
  .van-icon {
    line-height: 0.45rem;
    margin-right: 0.2rem;
  }
}
/* 蓝色大块样式 */
.GangGao {
  height: 1.5rem;
  width: 100%;
  background-color: #003399;
  color: white;
  text-align: center;
  line-height: 1.4rem;
  font-size: 0.25rem;
}
/* 功能模块样式 */
.workInfo {
  width: 100%;
  padding: 0.2rem 0.4rem 0.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    list-style: none;
    height: 1.8rem;
    width: 48%;
    background-color: white;
    margin-top: 0.1rem;
    text-align: center;
    img {
      padding-top: 0.3rem;
    }
    h3 {
      padding-top: 0.1rem;
    }
    span {
      color: #aaa;
      font-size: 0.12rem;
    }
  }
}
</style>
